<template>
  <div class="tutorial-list-page">
    <div class="header">
      <div class="back-button" @click="goBack">
        <el-icon><ArrowLeft /></el-icon>
      </div>
      <div class="title">使用教程</div>
    </div>
    
    <div class="tutorial-list">
      <div v-for="tutorial in tutorials" :key="tutorial.id" class="tutorial-item" @click="viewTutorial(tutorial)">
        <div class="tutorial-icon">
          <el-icon><Document /></el-icon>
        </div>
        <div class="tutorial-content">
          <div class="tutorial-title">{{ tutorial.title }}</div>
        </div>
        <div class="tutorial-arrow">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Document, ArrowLeft, ArrowRight } from '@element-plus/icons-vue'

export default {
  name: 'TutorialListPage',
  components: {
    Document,
    ArrowLeft,
    ArrowRight
  },
  setup() {
    const router = useRouter()
    
    const tutorials = ref([
      {
        id: 1,
        title: '如何开始学唱粤语歌',
        description: '新手入门必读，粤语发音基础知识'
      },
      {
        id: 2,
        title: '粤语歌常见问题解答',
        description: '解决学习过程中的常见疑问'
      },
      {
        id: 3,
        title: '发音技巧进阶',
        description: '掌握地道粤语发音的秘诀'
      },
      {
        id: 4,
        title: '粤语歌曲练习方法',
        description: '高效学习粤语歌的方法和步骤'
      },
      {
        id: 5,
        title: '软件功能详解',
        description: '如何充分利用粤歌学唱的所有功能'
      }
    ])
    
    const goBack = () => {
      router.push('/activated')
    }
    
    const viewTutorial = (tutorial) => {
      console.log('查看教程:', tutorial.title)
      // 这里可以跳转到具体的教程详情页面
      // router.push(`/tutorial/${tutorial.id}`)
    }
    
    return {
      tutorials,
      goBack,
      viewTutorial
    }
  }
}
</script>

<style scoped>
.tutorial-list-page {
  background: linear-gradient(135deg, #3d3878 0%, #1a1732 100%);
  color: white;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.header {
  width: 100%;
  max-width: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 30px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.back-button {
  position: absolute;
  left: 0;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.back-button:hover {
  transform: translateX(-3px);
}

.tutorial-list {
  width: 100%;
  max-width: 450px;
}

.tutorial-item {
  display: flex;
  align-items: center;
  padding: 16px;
  margin-bottom: 15px;
  border-radius: 10px;
  background-color: rgba(30, 30, 30, 0.6);
  border: 1px solid #333;
  cursor: pointer;
  transition: all 0.3s ease;
  height: 60px;
}

.tutorial-item:hover {
  background-color: rgba(40, 40, 40, 0.8);
  transform: translateX(3px);
}

.tutorial-icon {
  margin-right: 16px;
  color: #7B68EE;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tutorial-content {
  flex-grow: 1;
}

.tutorial-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.tutorial-arrow {
  margin-left: 10px;
  color: #666;
}

@media (max-width: 480px) {
  .tutorial-item {
    padding: 12px;
  }
  
  .tutorial-title {
    font-size: 15px;
  }
}
</style> 